<template>
  <div class="strategy-box" style="background: #fff; padding-bottom: 16px">
    <div class="title-box">
      <div class="title-text">{{ o.data.title }}</div>
      <div class="title-more">+查看更多</div>
    </div>
    <div
      class="strategy-item strategy-card"
      v-for="(item, index) in o.data.number.number"
      :key="index"
      :style="{ marginTop: index == 0 ? 0 : '16px' }"
    >
      <img
        class="strategy-cover"
        src="https://lbqny.migugu.com/admin/diy/default.png"
      />
      <div class="strategy-right">
        <div class="strategy-title">此处为攻略标题</div>
        <div class="flex-y-center mt-md">
          <div class="f-caption c-caption">99浏览</div>
          <div class="f-caption c-caption ml-md">999收藏</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'strategy',
  props: {
    o: Object
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.strategy-box .strategy-item {
  height: 99px;
  overflow: hidden;
  background: #fff;
  padding: 0 16px;
  display: flex;
  align-items: center;
  margin: 0 16px 0;
}
.strategy-card {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}
.strategy-cover {
  width: 82px;
  height: 62px;
  background: red;
  border-radius: 4px;
}
.strategy-right {
  flex: 1;
  margin-left: 16px;
}
.strategy-title {
  color: #414851;
  width: 100%;
  height: 38px;
}
.flex-y-center {
  display: flex;
  align-items: center;
}
.mt-md {
  margin-top: 8px;
}
.mt-lg {
  margin-top: 16px;
}
.ml-md {
  margin-left: 8px;
}
.f-caption {
  font-size: 12px;
}
.c-caption {
  color: #999;
}
.title-box {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 16px;
}
.title-text {
  flex: 1;
}
.title-more {
  color: #13d567;
}
</style>
